<template>
  <div class="dashboard-container" style="padding: 50px;">
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
    <el-row class="Chapter-addition">
      <el-row :gutter="20">
        <el-col :span="12" :offset="6" style="display: flex;">
          <div class="grid-content bg-purple">
           <div label-width="100px" class="demo-ruleForm">
           	<div style="margin-bottom: 0px;">
           		<!-- 渲染问题列表 -->
           		<section v-for="(value, index) in ruleForm.chapter_name" :key="index" style="display: flex; align-items: center; justify-content: center; margin-top: 10px;">
                <span class="What-chapter" >章一节</span>
                <span class="What-chapter" style="font-size: inherit; font-weight: 400;">章节名称：</span>
           			<section v-if="index === 0" style="width: 100%;">
           				<el-row>
           					<el-col :span="22">
           						<el-input v-model="ruleForm.chapter_name[index]" placeholder="请输入章节名称" clearable @keyup.enter.native="addlastitems(index, '1')"/>
           					</el-col>
           				</el-row>
           			</section>
           		</section>
           	</div>
           </div>
          </div>
        </el-col>
      </el-row>
    </el-row>

    <!-- 添加 -->
    <el-row class="chapter-add-to">
      <el-row :gutter="20">
        <el-col :span="12" :offset="6">
          <div class="grid-content bg-purple">
            <el-button type="primary" @click="submitForm('ruleForm')">修改</el-button>
          </div>
        </el-col>
      </el-row>
    </el-row>
    </el-form>
  </div>
</template>

<script>
import {cateComList} from "@/api/menu";
import {chapterAdd, chapterEdit} from '@/api/Chapter_management'
import {getInfo} from "@/api/user";
import {mapGetters} from "vuex";

export default {
  data() {
    return {
      input: '',
      ruleForm: {
        chapter_name: [],
        chapter_listNum: []
      },
      rules: {

      }
    }
  },
  computed: {
    ...mapGetters([
      'schoolId'
    ]),
  },
  mounted() {
    this.getInformations();
    this.ruleForm.chapter_name.push(this.$route.query.row.chapter_name)
    this.ruleForm.chapter_listNum.push(this.$route.query.row.chapter_listName)
  },
  filters: {

  },
  methods: {
    /**
     * 获取用户信息
     */
    getInformations() {
      getInfo().then(response => {
        console.log(response);
        this.id=response.data.id
      })
    },
    /**
      * 提交
      * @param formName
      */
     submitForm(formName) {
       console.log(this.$route.query.row)
       this.$refs[ formName ].validate((valid) => {
         if ( valid ) {
           this.listLoading = true;
           chapterEdit({
             "id": this.$route.query.row.id,
             "chapter_subjectId": '',
             "chapter_listNum": this.ruleForm.chapter_listNum,
             "chapter_name": this.ruleForm.chapter_name
             }).then(response => {
             this.listLoading = false;
             console.log(response);
             this.$message({message: '修改成功', type: 'success', duration: 1000});
             this.$router.go(-1)
           });
         } else {
           console.log('error submit!!');
           return false;
         }
       });
     },

    addlastitems(index, type) {
    	if (type === '1') {
    	  const lastitem = this.ruleForm.chapter_name[this.ruleForm.chapter_name.length - 1]
    	  if (lastitem.trim() === '') {
    		this.$message.error('请您填写完一项后继续追加')
    	  } else {
    		this.ruleForm.chapter_name.push('')
    	  }
    	}
    },
    rmlastitems(index, type) {
    	switch (type) {
    	  case '1':
    		this.ruleForm.chapter_name.splice(index, 1)
    		break
    	}
    	this.$message.success('移除成功')
    }
  }
}
</script>
<style scoped>
  /deep/ .el-form-item__label{
    font-size: inherit;
  }
  /deep/ .el-form-item__content{
    margin-left: 0px !important;
  }
</style>
<style>
  .Chapter-addition .grid-content{width: 100%;}
  .Chapter-addition .grid-content .add-to{width: 100%;display: flex;align-items: center;justify-content: center;}
  .Chapter-addition .grid-content .What-chapter{width: 15%;display: flex;justify-content: center;font-weight: bold;font-size: 18px; line-height: 41px;}
  .Chapter-addition .grid-content .Chapter-title{width: 20%;display: flex;align-items: center;justify-content: center;}
  .Chapter-addition .add-button{width: 44px; height: 40px; margin-left: 20px; border-radius: 100%; display: flex; align-items: center; justify-content: center; background-color: #b9b9b9;cursor: pointer;}
  .Chapter-addition .add-button .add-button-span{font-size: 35px; color: #fff;}
  .Chapter-addition .demo-ruleForm{width: 100%;}
  .Chapter-addition .demo-ruleForm .el-row{margin-top: 0px !important;}
 .chapter-add-to{margin-top: 20px;}
 .chapter-add-to .el-button{width: 100%;}
</style>
